<template>
  <section class="f-transfer">
    <div class="w-card my-content-box">
      <div class="title-box">
        <span class="title-text">充值列表</span>
        <div style="margin-left:auto;">
          <el-button type="warning" plain @click="importHandle(1)">导入</el-button>
        </div>
      </div>
      <div class="my-search-box">
        <div>
          <span>设备编号：</span>
          <el-input v-model="searchForm.deviceNo" clearable placeholder="请输入设备编号" />
        </div>
        <div>
          <span>处理状态：</span>
          <el-select v-model="searchForm.dealState" placeholder="请选择" clearable>
            <el-option label="待处理" value="0" />
            <el-option label="处理中" value="1" />
            <el-option label="处理完成" value="2" />
          </el-select>
        </div>
        <div class="datebox">
          <span>创建时间：</span>
          <el-date-picker v-model="searchForm.date" type="datetimerange" value-format="x" start-placeholder="开始时间"
            end-placeholder="结束时间" @change="selectDate" />
        </div>
        <div class="f-ml-20">
          <el-button @click="searchHandle" type="primary">查询</el-button>
          <el-button @click="resetHandle">重置</el-button>
        </div>
      </div>

      <div class="my-table-box">
        <el-table :height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
          :cell-style="{fontSize:'12px',color:'#7b7b7d'}" :data="tableData" stripe>
          <el-table-column type="index" width="55" label="序号" align="center" />
          <el-table-column prop="recordId" label="操作记录ID" align="center">
            <template v-slot="scope">
              <el-link style="font-size:12px" type="primary" @click="openDialog(scope.row)">
                {{ scope.row.recordId || '--' }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="total" label="总数" align="center">
            <template v-slot="scope">
              {{ scope.row.total  }}
            </template>
          </el-table-column>
          <el-table-column prop="successNum" label="成功数" align="center">
            <template v-slot="scope">
              {{ scope.row.successNum  }}
            </template>
          </el-table-column>
          <el-table-column prop="failNum" label="失败数" align="center">
            <template v-slot="scope">
              {{ scope.row.failNum }}
            </template>
          </el-table-column>
          <el-table-column prop="dealState" label="处理状态" align="center">
            <template v-slot="scope">
              {{ dealState[scope.row.dealState]  }}
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="备注" align="center">
            <template v-slot="scope">
              {{ scope.row.tremarks || '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="createByUserName" label="创建者" align="center">
            <template v-slot="scope">
              {{ scope.row.createByUserName || '--'  }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
            <template v-slot="scope">
              {{ getDateTime(scope.row.createTime)[6] || '--' }}
            </template>
          </el-table-column>
        </el-table>
        <div class="my-table-footer">
          <el-pagination style="margin-left:auto;" v-model:currentPage="page" v-model:page-size="size"
            :page-sizes="[10, 20, 50, 100]" small :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>

      <!-- 导入弹窗 -->
      <Upload ref="uploadRef" v-if="off.upload" :uploadForm="uploadForm" apiName="chargeImportTemplate"
        @handleUploadSuccess="importSuccess" @handleUploadCancel="handleUploadCancel" />

      <el-dialog v-model="dialogTableVisible" title="充值导入详情" top="5vh" width="1300">
        <div class="my-table-box">
          <el-table height="650" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
            :cell-style="{fontSize:'12px',color:'#7b7b7d'}" :data="dialogTable" stripe>
            <el-table-column type="index" width="55" label="序号" align="center" />
            <el-table-column prop="recordId" label="操作记录ID" align="center">
              <template v-slot="scope">
                {{ scope.row.recordId || '--' }}
              </template>
            </el-table-column>
            <el-table-column prop="deviceId" label="设备ID" align="center">
              <template v-slot="scope">
                {{ scope.row.deviceId || '--' }}
              </template>
            </el-table-column>
            <el-table-column prop="deviceNo" label="设备号" align="center">
              <template v-slot="scope">
                {{ scope.row.deviceNo || '--' }}
              </template>
            </el-table-column>
            <el-table-column prop="isUsing" label="是否使用中" align="center">
              <template v-slot="scope">
                {{ scope.row.isUsing || '--' }}
              </template>
            </el-table-column>
            <el-table-column prop="packageOrder" label="订单号" align="center">
              <template v-slot="scope">
                {{ scope.row.packageOrder || '--' }}
              </template>
            </el-table-column>
            <el-table-column prop="resultState" label="处理状态" align="center">
              <template v-slot="scope">
                {{ resultState[scope.row.resultState] }}
              </template>
            </el-table-column>
            <el-table-column prop="chargeMoney" label="充值金额(元)" align="center">
              <template v-slot="scope">
                <p>{{ scope.row.chargeMoney || '--' }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="chargeTime" label="充值时间" align="center">
              <template v-slot="scope">
                {{ scope.row.chargeTime || '--' }}
              </template>
            </el-table-column>
            <el-table-column prop="packageName" label="套餐" align="center">
              <template v-slot="scope">
                {{ scope.row.packageName || '--'}}
              </template>
            </el-table-column>
            <el-table-column prop="resultMsg" label="结果说明" align="center">
              <template v-slot="scope">
                {{ scope.row.resultMsg || '--' }}
              </template>
            </el-table-column>
          </el-table>
          <div class="my-table-footer">
            <el-pagination style="margin-left:auto;" v-model:currentPage="dialogPage" v-model:page-size="dialogSize"
              :page-sizes="[10, 20, 50, 100]" small :background="true" layout="total, sizes, prev, pager, next, jumper"
              :total="dialogTotal" @current-change="handleCurrentChangeDialog" />
          </div>
        </div>
      </el-dialog>
    </div>
  </section>
</template>

<script>
import { onMounted, reactive, ref, toRefs, watch, nextTick } from 'vue'
import { getWindowWidthAndHeight, warningDeal, getDateTime, successDeal, BlobDownLoad } from '@/utils/utils'
import { useRoute, useRouter } from 'vue-router'
import Upload from '@/components/Upload.vue'
import api from '../api'

export default {
  components: { Upload },

  setup() {
    const route = useRoute()
    const router = useRouter()

    const uploadRef = ref(null)

    const state = reactive({
      off: {
        upload: false,
      },

      searchForm: {
        "createTimeMax": "",
        "createTimeMin": "",
        "dealState": "", //	处理状态，1-待处理，2-处理中，3-处理完成
        "orderBy": "id desc",
      },

      tableHeight: 0,
      tableData: [],
      page: 1,
      size: 10,
      total: 0,

      uploadForm: {
        dialogTitle: '导入充值',
        action: '/eas/manage/yilian/charge/importData',
        recordId: ''
      },

      dealState: {
        '0': '待处理',
        '1': '处理中',
        '2': '处理完成',
      },
      resultState: {
        '0': '待处理',
        '1': '成功',
        '2': '失败',
      },

      dialogTableVisible: false,
      dialogForm: {
        "orderBy": "id desc",
        "uniqueId": ""
      },
      dialogTable: [],
      dialogType: 1,
      dialogPage: 1,
      dialogSize: 10,
      dialogTotal: 0,
    })

    function searchHandle() {
      state.page = 1
      getTableData()
    }

    function resetHandle() {
      state.searchForm = {
        "createTimeMax": "",
        "createTimeMin": "",
        "dealState": "", //	处理状态，1-待处理，2-处理中，3-处理完成
        "orderBy": "id desc",
      }
      searchHandle()
    }

    function getTableData() {
      const obj = {
        page: state.page,
        size: state.size,
        ...state.searchForm,
      }
      api.chargeList(obj).then(res => {
        state.tableData = res.data.list
        state.total = res.data.total
      }).catch(err => {
        console.log(err)
      })
    }

    function handleCurrentChange(e) {
      state.page = e
      getTableData()
    }

    function handleSizeChange(e) {
      state.size = e
      getTableData()
    }

    // 导入
    function importHandle(data) {
      state.off.upload = true
      state.uploadForm.recordId = data.recordId
      nextTick(() => {
        uploadRef.value.off.dialog = true
      })
    }

    //导入成功
    function importSuccess() {
      state.page = 1
      getTableData()
    }

    const handleUploadCancel = () => {
      state.off.upload = false
    }

    const openDialog = (data) => {
      state.dialogTableVisible = true
      state.dialogForm = data
      getChargeDetail()
    }

    const getChargeDetail = () => {
      const obj = {
        page: state.dialogPage,
        size: state.dialogSize,
        ...state.dialogForm,
        uniqueId: state.dialogForm.recordId
      }
      api.chargeDetail(obj).then(res => {
        state.dialogTable = res.data.list
        state.dialogTotal = res.data.total
      })
    }

    function handleCurrentChangeDialog(e) {
      state.dialogPage = e
      getChargeDetail()
    }

    const selectDate = (e) => {
      state.searchForm.createTimeMin = e[0]
      state.searchForm.createTimeMax = e[1]
    }

    onMounted(() => {
      let winHeight = getWindowWidthAndHeight()
      state.tableHeight = winHeight.windowHeight - 280
      getTableData()
    })

    return {
      ...toRefs(state),
      uploadRef,
      searchHandle,
      resetHandle,
      handleCurrentChange,
      handleSizeChange,
      getDateTime,
      importSuccess,
      importHandle,
      handleUploadCancel,
      openDialog,
      selectDate,
      handleCurrentChangeDialog
    }
  }
}
</script>

<style lang="scss" scoped>
.f-transfer {
  .my-content-box {
    box-sizing: border-box;
    padding: 20px;

    > .title-box {
      display: flex;
      align-items: center;

      > .title-text {
        font-size: 16px;
        font-weight: bold;
      }
    }

    .my-search-box {
      box-sizing: border-box;
      padding: 20px 20px 20px 0;
      padding-bottom: 0;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;

      > div {
        width: 300px;
        display: flex;
        align-items: center;

        > span {
          flex-shrink: 0;
          width: 90px;
          text-align: right;
        }
      }

      .datebox {
        width: 500px;
      }
    }

    .my-table-box {
      margin-top: 20px;

      .table-handle-box {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0 15px;
      }

      .my-table-footer {
        display: flex;
        align-items: center;
        margin-top: 10px;
        flex-wrap: wrap;
        gap: 10px;
      }
    }
  }
}
</style>